<template>
    <section class="left-menu-co">
        <ul>
            <li v-for="i in menu" :key="i.id">
                <p class="left-menu-title">{{i.name}}</p>
                <ul class="left-menu-container">
                    <li :class="{active: y.path === path || y.child[0].path === path || y.child[1].path === path}" v-for="(y, k) in i.child" :key="k">
                        <router-link :to="y.path">
                            <span style="font-weight: bold">·</span> {{y.name}} <Icon  type="ios-arrow-forward" />
                        </router-link>
                    </li>
                </ul>
            </li>
        </ul>
    </section>
</template>

<script>
export default {
  name: 'LeftMenu',
    props: {
        menu: {
            type: Array,
            required: true
        },
    },
    computed: {
      path () {
          // if(this.$route.path==='/my/mydiary/commentdetails'){
          //     this.$route.path = '/my/mydiary/list'
          //     console.log( this.$route.path)
          // }
          // console.log( this.$route.path)
          return this.$route.path


      }
    },
    data () {
      return {
      }
    }
}
</script>

<style scoped lang="less">
  @import "../../../style/style.less";
  .left-menu-co {
      background-color: #fafafa;
      .left-menu-title {
        padding-left: 36px;
        height: 48px;
        line-height: 48px;
        font-size: 18px;
        color: #000;
          font-weight: bold;
      }
      .left-menu-container {
          li {
             padding-left: 36px;
             height: 44px;
             line-height: 44px;
             font-size: 14px;
             cursor: pointer;
              position: relative;
              &:hover {
                  color: #fff;
                  background-color: @theme-color-dark;
                  a {
                      color: #fff;
                  }
                  i {
                      display: inline-block;
                  }
              }
              i {
                  display: none;
                  position: absolute;
                  right: 10px;
                  top: 16px;
              }
              a {
                  display: block;
                  color: #333;
              }
          }
          li.active {
              color: #fff;
              background-color: @theme-color-dark;
              cursor: pointer;
              a {
                  color: #fff;
              }
              i {
                  display: inline-block;
              }
          }
      }
  }
</style>
